<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-12 bold flex flex-ac flex-jsb">
      <div class="title">承包合同</div>
      <div class="flex flex-ac">
        <!-- <el-icon class="add_icon" :size="20" @click="handleAddClick">
          <CirclePlus />
        </el-icon> -->
        <el-button @click="handleAddClick" type="primary" size="small" :icon="Plus">新增</el-button>
        <div class="dots flex flex-c flex-jc flex-ac">
          <span>.</span>
          <span>.</span>
          <span>.</span>
        </div>
      </div>
    </div>
    <div class="main_box m-10 grid">
      <el-table ref="singleTable" :data="tableData" max-height="240" style="width: 100%" fit :header-cell-style="{
          color: '#000',
          background: '#f2f2f2',
        }">
        <el-table-column prop="name" label="业务姓名" align="center">
        </el-table-column>
        <el-table-column prop="businessName" label="服务对象" align="center">
        </el-table-column>
        <el-table-column prop="attributeType" label="业务类型" align="center">
          <template #default="scope">
            <div v-if="scope.row.attributeType == 0">小区厨余收运</div>
            <div v-else-if="scope.row.attributeType == 1">小区其他收运</div>
            <div v-else-if="scope.row.attributeType == 2">餐厨垃圾收运</div>
            <div v-else-if="scope.row.attributeType == 3">站点管理</div>
          </template>
        </el-table-column>
        <el-table-column prop="signingUnit" label="合作单位" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" align="center">
        </el-table-column>
        <el-table-column prop="default" label="操作" width="210" fixed="right" align="center">
          <template #default="scope">
            <el-button @click="handleDetailsClick(scope.row)" type="success" size="small">
              详情
            </el-button>
            <el-button @click="handleEditClick(scope.row)" type="primary" size="small">编辑</el-button>
            <el-popconfirm width="220" :icon="WarningFilled" icon-color="#f56c6c" title="是否确认删除"
              confirm-button-type="danger" @confirm="handleDelClick(scope.row)" placement="top"
              cancel-button-type="primary" confirm-button-text="确定" cancel-button-text="取消">
              <template #reference>
                <!-- @click="handleDelClick(scope.row)" -->
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_box mt-20" v-if="total > 0">
        <el-pagination small :current-page.sync="currentPage" :page-size.sync="pageSize" :page-sizes="[10, 20, 30, 50]"
          background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
// import { useStore } from "vuex";
import * as echarts from "echarts";
import { ElMessageBox, ElMessage } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import {
  WarningFilled,
  Plus,
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  View,
} from "@element-plus/icons-vue";
import {
  getUserInfo,
} from "@/utils/auth";
import { useMousePosition } from "@/hooks/dateSelect";
const { timeType } = useMousePosition();
import {
  unitBusinessDelApi
} from "@/api/contract";
// const store = useStore();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;
const props: any = defineProps({
  tableListData: {
    type: Array,
    default: () => ([])
  },
  listTotal: {
    type: Number,
    default: 0
  }
});
const emit = defineEmits(['handleAddBtn', 'getHandleList', 'handleDetails', 'handleEdit']);
let pageSize = ref(10);
let currentPage = ref(1);
let total = ref(0);
onMounted(() => { });

onBeforeUnmount(() => { });
onUnmounted(() => { });

let tableData = ref<any>([]);

const userInfo = ref<any>({});
watch(
  () => props.tableListData,
  (arr: any) => {
    console.log('承包', arr);

    tableData.value = arr || []
  },
  {
    deep: true,
  }
);
watch(
  () => props.listTotal,
  (num: any) => {
    console.log('总数', num);
    total.value = num || 0
  },
  {
    deep: true,
  }
);



// 新增
const handleAddClick = () => {
  emit('handleAddBtn', 1)
};
// 详情
const handleDetailsClick = (scope: any) => {
  emit('handleDetails', 1, scope)
};
// 编辑
const handleEditClick = (scope: any) => {
  emit('handleEdit', 1, scope)
};
// 删除
const handleDelClick = async (scope: any) => {
  let res: any = await unitBusinessDelApi({ id: scope.id });
  if (res?.success || res?.data?.code === 200) {
    ElMessage.success("删除成功!")
    emit('getHandleList', 1, 10)
  } else ElMessage.warning(res?.msg || res?.data?.message);
};
//条数
function handleSizeChange(value: any) {
  pageSize.value = value;
  console.log("条数", value);
  emit('getHandleList', currentPage.value, pageSize.value)
}
function handleCurrentChange(value: any) {
  //页码发生变化会触发，这个用来触发点击页码时触发的。
  currentPage.value = value;
  console.log("页码发生变化会触发", value);
  emit('getHandleList', currentPage.value, pageSize.value)
}
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 300px;

  .header_box {
    .add_icon {
      margin-right: 5px;
      cursor: pointer;
    }
  }

  .main_box {
    overflow-y: auto;
  }

  .el-radio.el-radio--large {
    height: 30px;
  }

  .el-upload__tip {
    font-size: 13px;
    margin-top: -30px;
    margin-left: 100px;
    color: #939191;
  }
}
</style>